<template>
<<<<<<< HEAD
  <div class='container'>面试技巧</div>
</template>

<script>
export default {}
</script>

<style scoped lang='less'></style>
=======
  <div class="box">
    <!-- 搜索区域 -->
    <div class="search-box">
      <el-form :inline="true" :model="q" class="demo-form-inline">
        <el-form-item label="关键字">
          <el-input v-model="q.user" placeholder="根据文章标题搜索" size="small"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="q.state" placeholder="请选择">
            <el-option label="启用" value="0"></el-option>
            <el-option label="禁用" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="" size="small">清空</el-button>
          <el-button type="primary" size="small">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-button type="success" class="el-icon-edit" @click="showDialog = true">新增技巧</el-button>
    </div>

    <div class="ol">
      <i class="el-alert__icon el-icon-info"></i>
      <span>数据一共 {{counts}} 条</span>
    </div>

    <!-- 表格区域 -->
    <el-table :data="list" highlight-current-row>
      <el-table-column label="序号" type="index" width="50">
      </el-table-column>
      <el-table-column label="文章标题" prop="title" width="350">
      </el-table-column>
      <el-table-column label="阅读人数" prop="visits" width="90">
      </el-table-column>
      <el-table-column label="录入人" prop="username" width="100">
      </el-table-column>
      <el-table-column label="录入时间" prop="" width="160">
        <template #default="{ row: { createTime } }">
          {{ $time(createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="state" width="100">
        <template v-slot="{row}">
          <el-switch v-model="row.state" :active-value="0" :inactive-value="1" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template v-slot="{row}">
          <el-button type="text">预览</el-button>
          <el-button type="text">禁用</el-button>
          <el-button type="text" @click="edit(row)">修改</el-button>
          <el-button type="text" @click="del(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <el-pagination background @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[5, 10, 20, 50]" :current-page="q.page" :page-size="q.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="counts">
    </el-pagination>
    <!-- 新增技巧 -->
    <articles-add :show-dialog.sync="showDialog" @show="show" />
  </div>
</template>

<script>
import { list, remove } from '@/api/hmmm/articles.js'
import articlesAdd from '../components/articles-add.vue'
export default {
  components: { articlesAdd },
  name: 'List',
  data () {
    return {
      q: {
        page: 1, // 默认几页
        pagesize: 10, // 一页显示几条数据
        keyword: '' // 关键词搜索
        // state: '' // 状态
      },
      // 控制添加员工弹窗标志位
      showDialog: false,
      list: [], // 文章列表
      counts: 0 // 文章数量
    }
  },
  created () {
    this.loadList()
  },
  methods: {
    // 修改文章
    edit (row) {

    },
    // 删除文章
    async del (row) {
      try {
        // 询问,删除确认框
        await this.$confirm('此操作将永久删除该文章, 是否继续??', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        // 调用删除接口
        await remove(row)
        // 成功提示
        this.$message.success('删除成功')
        // 重新获取一次列表
        await this.loadList()
        if (this.list.length === 0 && this.q.page > 1) {
          this.q.page--
          this.loadList()
        }
      } catch (e) {
        this.$message('已取消')
      }
    },
    // 监听子组件
    show () {
      this.loadList()
    },
    // 监听页码
    handleCurrentChange (page) {
      // console.log(`当前页: ${page}`)
      this.q.page = page
      this.loadList()
    },
    handleSizeChange (pagesize) {
      // console.log(`每页 ${pagesize} 条`)
      this.q.pagesize = pagesize
      this.loadList()
    },
    // 获取文章列表
    async loadList () {
      const ret = await list(this.q)
      if (ret.status === 200) {
        this.list = ret.data.items
        this.counts = ret.data.counts
      }
      // console.log(ret)
    }
  }
}
</script>

<style scoped>
.box {
  margin: 10px;
  background-color: #fff;
}
.search-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 15px 20px;
}
.el-alert__icon {
  font-size: 16px;
  width: 16px;
}
.ol {
  background-color: #ccc;
  height: 25px;
  margin: 0 20px;
  padding-top: 5px;
  padding-left: 10px;
}
</style>
>>>>>>> 137875552f2efacb43668108598e0019e1ad86cf
